<template>
    <div style="margin-top: 5px;">
        <el-table
                :data="empRemoves"
                stripe
                border
                v-loading="loading"
                element-loading-text="数据加载中..."
                size="mini"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    fixed>
            </el-table-column>
            <el-table-column
                    prop="jobNo"
                    width="100"
                    label="工号">
            </el-table-column>
            <el-table-column
                    prop="leaveWorkDate"
                    width="100"
                    label="离职日期"
                    fixed>
            </el-table-column>
            <el-table-column
                    prop="idCard"
                    width="210"
                    label="身份证号码">
            </el-table-column>
            <el-table-column
                    prop="maritalStatus"
                    label="婚姻状况">
            </el-table-column>
            <el-table-column
                    prop="birthPlace"
                    label="籍贯">
            </el-table-column>
            <el-table-column
                    prop="email"
                    width="150"
                    label="电子邮箱">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    width="100"
                    label="电话号码">
            </el-table-column>
            <el-table-column
                    prop="address"
                    width="200"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="department.name"
                    label="部门">
            </el-table-column>
            <el-table-column
                    prop="position.name"
                    width="90"
                    label="职位">
            </el-table-column>
            <el-table-column
                    prop="school"
                    width="150"
                    label="毕业院校">
            </el-table-column>
            <el-table-column
                    prop="onboardingDate"
                    width="100"
                    label="入职日期">
            </el-table-column>
            <el-table-column
                    width="90"
                    label="合同期限">
                <template slot-scope="scope">
                    <el-tag>{{scope.row.contractTerm}}</el-tag>
                    年
                </template>
            </el-table-column>
            <el-table-column
                    prop="conversionTime"
                    width="100"
                    label="转正日期">
            </el-table-column>
            <el-table-column
                    prop="beginContract"
                    width="100"
                    label="合同起始日期">
            </el-table-column>
            <el-table-column
                    prop="endContract"
                    width="100"
                    label="合同终止日期">
            </el-table-column>
            <el-table-column
                    prop="workState"
                    label="任职状态">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="145"
                    label="操作">
                <template slot-scope="scope">
                    <el-button  size="mini" type="danger" @click="deleteEmpRemove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: center;margin-top: 10px">
            <el-pagination
                    background
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    layout="sizes, prev, pager, next, jumper, ->, total, slot"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "employeeRemove",
        data(){
            return{
                empRemoves:[],
                pageSize:10,
                pageNo:1,
                total:10,
                loading:false
            }
        },
        mounted() {
            this.initEmpRemoves();
        },
        methods:{
            initEmpRemoves(){
                this.loading = true
                this.getRequest("/personnel/remove/getEmpOfNotWork?pageNo="+ this.pageNo + "&pageSize=" + this.pageSize).then(resp=>{
                    this.loading = false;
                    if(resp){
                        this.empRemoves = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            deleteEmpRemove(data){
                this.$confirm('此操作将永久删除【' + data.name + '】员工的离职记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/personnel/remove/deleteEmpRemove/" + data.id).then(resp => {
                        if (resp) {
                            this.initEmpRemoves();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            sizeChange(currentSize) {
                this.pageSize = currentSize;
                this.initEmpRemoves();
            },
            currentChange(currentNo){
                this.pageNo = currentNo;
                this.initEmpRemoves();
            }
        }
    }
</script>

<style scoped>

</style>
